<template>
    <div id="echars">

    </div>
    
    <div id="borderechar"></div>
    <p style="text-align: center; margin-top: 16px;">近七天借阅数量</p>
    <div id="longechar"></div>
</template>
<script setup >

import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

const chartData = ref([0]);
const borData = ref([0]);

onMounted(() => {
  const chartElement = document.getElementById('echars');
  const chart = echarts.init(chartElement);

  const options = {
         series: [
    {
      type: 'pie',
      data: [
        {
          value: 169,
          name: '图书总数'
        },
        {
          value: 167,
          name: '在库数量'
        },
        {
          value: 300,
          name: '图书总数'
        },
        {
          value: 69,
          name: '图书总品类'
        },
        {
          value: 300,
          name: '超期数量'
        }
      ],
      roseType: 'area'
    },
    ]
  };

  chart.setOption(options);

  // 在这里可以更新图表数据
  chartData.value = [10, 20, 30, 40];
  const borElement = document.getElementById('borderechar');
  const  borchart = echarts.init(borElement);
const boroptions = {
    title: {
    text: '外借数量统计',
   
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 580, name: '在库数量' },
        { value: 484, name: '外借数量' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
  };
  borchart.setOption(boroptions);
  const longElement = document.getElementById('longechar');
  const  longchart = echarts.init(longElement);
const longoptions = {
    xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
  };
  longchart.setOption(longoptions);

});


</script>

<style lang="less" scoped>
#echars{
    height: 300px;
    }
#borderechar{
        height: 200px;
    }
    #longechar{
        height: 300px;
    }
</style>